<template>
  <div class="form-content">

  </div>
</template>

<script lang="ts">
export default {
  name: 'FormContent'
}
</script>

<script lang="ts" setup>
import VueForm from '@lljj/vue3-form-element'
import { formatFormLabelWidth } from '@/form-editor/common/editorData'
import NestedEditor from './NestedEditor.vue'

const $style = useCssModule()

const rootFormData = ref({})

const componentList = ref<any[]>([])

const formConfig = ref<Record<string, any>>({})

const dragOptions = {
  animation: 300,
  group: 'listComponentsGroup',
  disabled: false,
  ghostClass: 'ghostItem',
  filter: $style.disabled,
  draggable: '.draggableItem',
  tag: 'div',
  swapThreshold: 0.3
  // forceFallback: true
  // fallbackTolerance: 0
}

const formProps = computed(() => {
  if (!formConfig.value?.formProps) {
    return {}
  }
  return {
    ...formConfig.value.formProps,
    labelWidth: formatFormLabelWidth(formConfig.value.formProps.labelWidth)
  }
})

const formFooter = computed(() => formConfig.value.formFooter)

const formData = ref({})
const handleSubmit = (e: any) => {
  console.log(e, formData)
}

const schema = {
  title: 'UserInfo 表单',
  description: 'A simple form example.',
  type: 'object',
  required: ['firstName', 'lastName'],
  properties: {
    firstName: {
      type: 'string',
      title: 'First name',
      default: 'Jun'
    },
    lastName: {
      type: 'string',
      title: 'Last name'
    },
    age: {
      type: 'integer',
      title: 'Age',
      maximum: 80,
      minimum: 16
    },
    bio: {
      type: 'string',
      title: 'Bio',
      minLength: 10
    },
    password: {
      type: 'string',
      title: 'Password',
      minLength: 3
    },
    telephone: {
      type: 'string',
      title: 'Telephone',
      minLength: 10
    }
  }
}
</script>

<style scoped></style>
